import themeColorList from './themeColor.json'
import hotThemeColorList from './hotThemeColor.json'
import type { ThemeColorType, ColorMixinType, ThemeType } from '@/types/theme.d'
import { colorMix, hexToRgb } from './index'
import { addClass, removeClass } from '@/utils/domUtil'
export const setThemeColor = systemConfig => {
  document.documentElement.style.setProperty('color-scheme', systemConfig.isLight ? 'light' : 'dark')

  document.documentElement.style.setProperty('--el-space', systemConfig.space + 'px')

  // 背景色
  document.documentElement.style.setProperty('--el-bg-color', systemConfig.isLight ? '#ffffff' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.065))
  document.documentElement.style.setProperty('--el-bg-color-page', systemConfig.isLight ? '#f6f8f9' : colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin))
  document.documentElement.style.setProperty('--el-bg-color-overlay', systemConfig.isLight ? '#ffffff' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.07))

  // 文字类颜色
  document.documentElement.style.setProperty('--el-text-color-primary', systemConfig.isLight ? '#515a6e' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.8))
  document.documentElement.style.setProperty('--el-text-color-regular', systemConfig.isLight ? '#606266' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.7))
  document.documentElement.style.setProperty('--el-text-color-secondary', systemConfig.isLight ? '#909399' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.6))
  document.documentElement.style.setProperty('--el-text-color-placeholder', systemConfig.isLight ? '#a8abb2' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.4))
  document.documentElement.style.setProperty('--el-text-color-disabled', systemConfig.isLight ? '#c0c4cc' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.3))

  // 边框类颜色
  document.documentElement.style.setProperty('--el-border-color-darker', systemConfig.isLight ? '#cdd0d6' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#f5f8ff', 0.08))
  document.documentElement.style.setProperty('--el-border-color-dark', systemConfig.isLight ? '#d4d7de' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#f5f8ff', 0.14))
  document.documentElement.style.setProperty('--el-border-color', systemConfig.isLight ? '#dcdfe6' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#f5f8ff', 0.2))
  document.documentElement.style.setProperty('--el-border-color-light', systemConfig.isLight ? '#e4e7ed' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#f5f8ff', 0.21))
  document.documentElement.style.setProperty('--el-border-color-lighter', systemConfig.isLight ? '#ebeef5' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#f5f8ff', 0.22))
  document.documentElement.style.setProperty('--el-border-color-extra-light', systemConfig.isLight ? '#f2f6fc' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#f5f8ff', 0.26))

  // 模块填充类颜色
  document.documentElement.style.setProperty('--el-fill-color-darker', systemConfig.isLight ? '#e6e8eb' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#fafcff', 0.02))
  document.documentElement.style.setProperty('--el-fill-color-dark', systemConfig.isLight ? '#ebedf0' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#fafcff', 0.04))
  document.documentElement.style.setProperty('--el-fill-color', systemConfig.isLight ? '#f0f2f5' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#fafcff', 0.08))
  document.documentElement.style.setProperty('--el-fill-color-light', systemConfig.isLight ? '#f5f7fa' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#fafcff', 0.12))
  document.documentElement.style.setProperty('--el-fill-color-lighter', systemConfig.isLight ? '#fafafa' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#fafcff', 0.16))
  document.documentElement.style.setProperty('--el-fill-color-extra-light', systemConfig.isLight ? '#fafcff' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), '#fafcff', 0.2))
  document.documentElement.style.setProperty('--el-fill-color-blank', systemConfig.isLight ? '#ffffff' : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.07))

  // 设置主题色及衍生色
  document.documentElement.style.setProperty('--el-color-primary', systemConfig.theme.color)
  document.documentElement.style.setProperty('--el-color-primary-rgb', hexToRgb(systemConfig.theme.color))
  document.documentElement.style.setProperty('--el-color-primary-light-3', colorMix(systemConfig.theme.color, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.3))
  document.documentElement.style.setProperty('--el-color-primary-light-5', colorMix(systemConfig.theme.color, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.5))
  document.documentElement.style.setProperty('--el-color-primary-light-7', colorMix(systemConfig.theme.color, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.7))
  document.documentElement.style.setProperty('--el-color-primary-light-8', colorMix(systemConfig.theme.color, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.8))
  document.documentElement.style.setProperty('--el-color-primary-light-9', colorMix(systemConfig.theme.color, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.9))
  document.documentElement.style.setProperty('--el-color-primary-dark-2', colorMix(systemConfig.theme.color, systemConfig.isLight ? themeBaseColor.black : themeBaseColor.white, 0.2))

  // 设置成功色及衍生色
  document.documentElement.style.setProperty('--el-color-success', themeBaseColor.success)
  document.documentElement.style.setProperty('--el-color-success-rgb', hexToRgb(themeBaseColor.success))
  document.documentElement.style.setProperty('--el-color-success-light-3', colorMix(themeBaseColor.success, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.3))
  document.documentElement.style.setProperty('--el-color-success-light-5', colorMix(themeBaseColor.success, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.5))
  document.documentElement.style.setProperty('--el-color-success-light-7', colorMix(themeBaseColor.success, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.7))
  document.documentElement.style.setProperty('--el-color-success-light-8', colorMix(themeBaseColor.success, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.8))
  document.documentElement.style.setProperty('--el-color-success-light-9', colorMix(themeBaseColor.success, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.9))
  document.documentElement.style.setProperty('--el-color-success-dark-2', colorMix(themeBaseColor.success, systemConfig.isLight ? themeBaseColor.black : themeBaseColor.white, 0.2))

  // 设置警告色及衍生色
  document.documentElement.style.setProperty('--el-color-warning', themeBaseColor.warning)
  document.documentElement.style.setProperty('--el-color-warning-rgb', hexToRgb(themeBaseColor.warning))
  document.documentElement.style.setProperty('--el-color-warning-light-3', colorMix(themeBaseColor.warning, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.3))
  document.documentElement.style.setProperty('--el-color-warning-light-5', colorMix(themeBaseColor.warning, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.5))
  document.documentElement.style.setProperty('--el-color-warning-light-7', colorMix(themeBaseColor.warning, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.7))
  document.documentElement.style.setProperty('--el-color-warning-light-8', colorMix(themeBaseColor.warning, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.8))
  document.documentElement.style.setProperty('--el-color-warning-light-9', colorMix(themeBaseColor.warning, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.9))
  document.documentElement.style.setProperty('--el-color-warning-dark-2', colorMix(themeBaseColor.warning, systemConfig.isLight ? themeBaseColor.black : themeBaseColor.white, 0.2))

  // 设置危险色及衍生色
  document.documentElement.style.setProperty('--el-color-danger', themeBaseColor.danger)
  document.documentElement.style.setProperty('--el-color-danger-rgb', hexToRgb(themeBaseColor.danger))
  document.documentElement.style.setProperty('--el-color-danger-light-3', colorMix(themeBaseColor.danger, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.3))
  document.documentElement.style.setProperty('--el-color-danger-light-5', colorMix(themeBaseColor.danger, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.5))
  document.documentElement.style.setProperty('--el-color-danger-light-7', colorMix(themeBaseColor.danger, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.7))
  document.documentElement.style.setProperty('--el-color-danger-light-8', colorMix(themeBaseColor.danger, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.8))
  document.documentElement.style.setProperty('--el-color-danger-light-9', colorMix(themeBaseColor.danger, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.9))
  document.documentElement.style.setProperty('--el-color-danger-dark-2', colorMix(themeBaseColor.danger, systemConfig.isLight ? themeBaseColor.black : themeBaseColor.white, 0.2))

  // 设置错误色及衍生色
  document.documentElement.style.setProperty('--el-color-error', themeBaseColor.error)
  document.documentElement.style.setProperty('--el-color-error-rgb', hexToRgb(themeBaseColor.error))
  document.documentElement.style.setProperty('--el-color-error-light-3', colorMix(themeBaseColor.error, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.3))
  document.documentElement.style.setProperty('--el-color-error-light-5', colorMix(themeBaseColor.error, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.5))
  document.documentElement.style.setProperty('--el-color-error-light-7', colorMix(themeBaseColor.error, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.7))
  document.documentElement.style.setProperty('--el-color-error-light-8', colorMix(themeBaseColor.error, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.8))
  document.documentElement.style.setProperty('--el-color-error-light-9', colorMix(themeBaseColor.error, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.9))
  document.documentElement.style.setProperty('--el-color-error-dark-2', colorMix(themeBaseColor.error, systemConfig.isLight ? themeBaseColor.black : themeBaseColor.white, 0.2))

  // 设置信息色及衍生色
  document.documentElement.style.setProperty('--el-color-info', themeBaseColor.info)
  document.documentElement.style.setProperty('--el-color-info-rgb', hexToRgb(themeBaseColor.info))
  document.documentElement.style.setProperty('--el-color-info-light-3', colorMix(themeBaseColor.info, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.3))
  document.documentElement.style.setProperty('--el-color-info-light-5', colorMix(themeBaseColor.info, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.5))
  document.documentElement.style.setProperty('--el-color-info-light-7', colorMix(themeBaseColor.info, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.7))
  document.documentElement.style.setProperty('--el-color-info-light-8', colorMix(themeBaseColor.info, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.8))
  document.documentElement.style.setProperty('--el-color-info-light-9', colorMix(themeBaseColor.info, systemConfig.isLight ? themeBaseColor.white : themeBaseColor.black, 0.9))
  document.documentElement.style.setProperty('--el-color-info-dark-2', colorMix(themeBaseColor.info, systemConfig.isLight ? themeBaseColor.black : themeBaseColor.white, 0.2))

  // 侧边栏的区分设置
  document.documentElement.style.setProperty('--el-sidebar-bg-color', systemConfig.isLight ? colorMixin(systemConfig.theme.sidebar.detail, systemConfig.theme.sidebar.mixin) : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.095))
  document.documentElement.style.setProperty('--el-submenu-bg-color', submenuColorMixin(systemConfig))
  document.querySelector('body')?.setAttribute('data-menu-theme', getThemeType(systemConfig.theme.sidebar))

  // 顶栏背景色的区分设置
  document.documentElement.style.setProperty('--el-header-bg-color', systemConfig.isLight ? colorMixin(systemConfig.theme.header.detail, systemConfig.theme.header.mixin) : colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.135))
  document.querySelector('body')?.setAttribute('data-header-theme', getThemeType(systemConfig.theme.header))

  const dom = document.querySelector('html')
  if (dom) {
    // 为HTML标签添加主题色自定义属性
    dom.setAttribute('data-theme', systemConfig.theme.color)

    // 为html标签添加明暗主题的类名
    if (systemConfig.isLight) {
      removeClass(dom, 'dark')
      addClass(dom, 'light')
    } else {
      removeClass(dom, 'light')
      addClass(dom, 'dark')
    }
  }
}

/**
 *
 * @returns 随机返回一个颜色值
 */
export const randomColor = () => {
  const index = Math.floor(Math.random() * themeColorList.length)
  return themeColorList[index].hex
}

export const getColorList = () => {
  const res: any = []
  hotThemeColorList.forEach(item => {
    res.push(item.hex)
  })
  return res
}

// 系统基础颜色源
export const themeBaseColor = {
  // 基础色
  white: '#ffffff', // 白色
  black: '#000000', // 黑色
  // 混合明度、暗度色
  light: '#ffffff',
  dark: '#000000',
  // 信息提示类色系
  success: '#13ce66', // 成功
  warning: '#ffba00', // 警告
  danger: '#ff4d4f', // 危险
  error: '#ff4d4f', // 错误
  info: '#909399' // 信息
}

// 获取主题类型 light | bright | dark
export const getThemeType = (theme: ThemeType) => {
  if (theme.mixin.type === 'default') {
    return theme.detail.mode
  } else if (theme.mixin.type === 'light') {
    if (theme.detail.mode === 'bright') {
      if (theme.mixin.opacity > 0.7) {
        return 'light'
      } else if (theme.mixin.opacity < 0.3) {
        return 'dark'
      } else {
        return 'bright'
      }
    } else if (theme.detail.mode === 'light') {
      return 'light'
    } else {
      if (theme.mixin.opacity > 0.7) {
        return 'light'
      } else if (theme.mixin.opacity < 0.3) {
        return 'dark'
      } else {
        return 'bright'
      }
    }
  } else {
    if (theme.detail.mode === 'bright') {
      if (theme.mixin.opacity > 0.7) {
        return 'dark'
      } else if (theme.mixin.opacity < 0.3) {
        return 'dark'
      } else {
        return 'bright'
      }
    } else if (theme.detail.mode === 'light') {
      if (theme.mixin.opacity > 0.7) {
        return 'dark'
      } else if (theme.mixin.opacity < 0.3) {
        return 'light'
      } else {
        return 'bright'
      }
    } else {
      if (theme.mixin.opacity > 0.7) {
        return 'dark'
      } else if (theme.mixin.opacity < 0.3) {
        return 'dark'
      } else {
        return 'bright'
      }
    }
  }
}

/**
 * 主题颜色混合
 * @param color 基础色明细
 * @param mixin 基础色混入明细
 * @returns 返回混合后的颜色
 */
export const colorMixin = (color: ThemeColorType, mixin: ColorMixinType) => {
  if (mixin.type === 'default') {
    return color.hex
  } else if (mixin.type === 'light') {
    return colorMix(color.hex, themeBaseColor.light, mixin.opacity)
  } else {
    return colorMix(color.hex, themeBaseColor.dark, mixin.opacity)
  }
}

/**
 * 侧边栏子菜单背景色混合
 * @param systemConfig 系统配置参数
 * @returns
 */
export const submenuColorMixin = systemConfig => {
  let opacity = 0
  if (systemConfig.isLight) {
    if (systemConfig.theme.sidebar.detail.mode === 'light') {
      if (systemConfig.theme.sidebar.mixin.type === 'default') {
        // 淡色原色混合，原色混合无明暗度
        opacity = 0.075
      } else if (systemConfig.theme.sidebar.mixin.type === 'light') {
        // 淡色明度混合
        opacity = 0.075
      } else {
        // 淡色暗度混合，暗度程度分级
        if (systemConfig.theme.sidebar.mixin.opacity > 0.7) {
          opacity = 0.375
        } else if (systemConfig.theme.sidebar.mixin.opacity < 0.3) {
          opacity = 0.075
        } else {
          opacity = 0.175
        }
      }
    } else if (systemConfig.theme.sidebar.detail.mode === 'bright') {
      if (systemConfig.theme.sidebar.mixin.type === 'default') {
        // 鲜亮色原色混合，原色混合无明暗度
        opacity = 0.2
      } else if (systemConfig.theme.sidebar.mixin.type === 'light') {
        opacity = 0.075
      } else {
        opacity = 0.175
      }
    } else {
      if (systemConfig.theme.sidebar.mixin.type === 'default') {
        // 暗色原色混合，原色混合无明暗度
        opacity = 0.175
      } else if (systemConfig.theme.sidebar.mixin.type === 'light') {
        if (systemConfig.theme.sidebar.mixin.opacity > 0.7) {
          opacity = 0.075
        } else if (systemConfig.theme.sidebar.mixin.opacity < 0.3) {
          opacity = 0.175
        } else {
          opacity = 0.125
        }
      } else {
        if (systemConfig.theme.sidebar.mixin.opacity > 0.7) {
          opacity = 0.075
        } else if (systemConfig.theme.sidebar.mixin.opacity < 0.3) {
          opacity = 0.175
        } else {
          opacity = 0.375
        }
      }
    }
    return colorMix(colorMixin(systemConfig.theme.sidebar.detail, systemConfig.theme.sidebar.mixin), themeBaseColor.dark, opacity)
  } else {
    return colorMix(colorMixin(systemConfig.theme.dark.detail, systemConfig.theme.dark.mixin), themeBaseColor.light, 0.03)
  }
}

/**
 * 获取个暗系主题下，各类颜色的默认混合透明度
 * @param theme
 * @returns
 */
export const getDefaultDarkOpacity = (theme: ThemeType) => {
  if (theme.detail.mode === 'light') {
    return 0.875
  } else if (theme.detail.mode === 'bright') {
    return 0.815
  } else {
    return 0.375
  }
}
